<template>
  <div>
    <div v-show="isShow" id="appView" ref="monster"></div>
    <div class="cardBox">
      <img
        class="card"
        ref="card"
        src="https://cdn.233.momobako.com/ygopro/pics/35952884.jpg"
      />
    </div>
    <div class="content">
      <div class="linesBG" v-show="showLines">
        <img src="../../assets/ygh/chara/linesBG.png" />
        <p class="lines">{{ showLines }}</p>
      </div>
      <div class="chara"><img class="img" :src="chara" /></div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import SPINEMD from "../../utils/spineMD";
import AUDIO from "../../utils/audio";
export default {
  name: "App",
  data() {
    return {
      isShow: false,
      //客户端标识
      webUID: "cardClient",
      //长连接地址
      socketUrl: "ws://127.0.0.1:8080/",
      socket: {},
      ws: {},
      spineMd: null,
      spineID: 9709,
      //台词
      lines: [],
      //显示的台词
      showLines: "",
      chara: "http://127.0.0.1:3000/ygh/201/chara/Chara003_1.png",
    };
  },
  mounted() {
    this.myWebSocket();
    this.getLines(35952884);
  },
  methods: {
    //测试
    test() {
      this.$refs.card.classList.add("cardAnimation");
    },
    //获取台词
    getLines(data) {
      axios
        .get("http://127.0.0.1:3000/ygh/201/json/" + data + ".json")
        .then((res) => {
          if (res.status === 200) {
            this.lines = res.data;
          }
        });
    },
    // 创建音频对象
    createAudio(data) {
      let dataID = data.data;
      // 创建音频对象
      let sounds = [
        {
          src: ["http://127.0.0.1:3000/ygh/201/sounds/BG.mp3"],
          flag: "BG",
          howl: null,
        },
        {
          src: ["http://127.0.0.1:3000/ygh/201/sounds/" + dataID + ".ogg"],
          flag: "lrc",
          howl: null,
        },
      ];
      const audio = new AUDIO(sounds);
      audio.play();
      //台词播放完，播放骨架
      audio.end(this.spineMonster);
      let n = 0;
      let timeID = setInterval(() => {
        if (n > this.lines.length - 1 && this.lines.length > 0) {
          //结束定时器
          clearInterval(timeID);
          return;
        }
        let seek = Math.round(audio.seek());
        if (seek > this.lines[n].s) {
          this.showLines = this.lines[n].lyric;
          n++;
        }
      }, 100);
      let timeID2 = setInterval(() => {
        //当台词剩最后1s时，显示卡片
        let t = audio.duration();
        let seek = audio.seek();
        if (t - seek < 0.1) {
          this.$refs.card.classList.add("cardAnimation");
          clearInterval(timeID2);
        }
      }, 100);
    },
    // 创建骨架动画
    async spineMonster() {
      const screenWidth = window.innerWidth;
      const screenHeight = window.innerHeight;
      //显示骨架舞台
      this.isShow = true;
      //销毁pixi舞台
      if (this.spineMd !== null) {
        this.spineMd.destroy();
        this.spineMd = null;
      }
      if (typeof this.spineMd === "undefined") {
        // this.container = spineMD(this.$refs.monster, spineID);
        this.spineMd = new SPINEMD(
          this.$refs.monster,
          this.spineID,
          screenWidth,
          screenHeight
        );
        this.spineMd.init();
      }
      // this.container = spineMD(this.$refs.monster, spineID);
      this.spineMd = new SPINEMD(
        this.$refs.monster,
        this.spineID,
        screenWidth,
        screenHeight
      );
      this.spineMd.init();
    },
    // 建立长连接
    async myWebSocket() {
      this.ws = new WebSocket(this.socketUrl + this.webUID);
      this.ws.onopen = () => {
        console.log("正在建立长连接");
        this.ws.send(this.webUID);
      };
      this.ws.onmessage = (e) => {
        //收到的信息有cardID时,触发骨架动画
        if (e.data.indexOf("cardID") !== -1) {
          const obj = JSON.parse(e.data);
          if (obj.cardID) {
            this.spineID = obj.cardID;
            this.getLines(obj.data);
            this.createAudio(obj);
          }
        }
      };
      this.ws.onerror = (e) => {
        console.log(e);
      };
    },
  },
  destroyed() {
    // 关闭长连接
    this.ws.close();
  },
};
</script>

<style>
#appView {
  float: left;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.content {
  position: absolute;
  left: 0;
  bottom: 0;
}
.linesBG {
  position: relative;
}
.lines {
  position: absolute;
  white-space: nowrap;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.img {
  width: 80%;
  height: 80%;
}
.cardBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  /* width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center; */
}
.card {
  visibility: hidden;
  position: relative;
  transform-style: preserve-3d;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.cardAnimation {
  visibility: visible !important;
  animation-name: animation-card;
}
@keyframes animation-card {
  0% {
    transform: rotateX(90deg) rotateY(-35deg);
  }

  10% {
    top: -30px;
  }

  50% {
    top: 60xp;
  }

  100% {
    top: -70px;
    left: -50px;
    transform: rotateX(00deg) rotateY(0deg);
  }
}
</style>